@import "highlight"

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 200
  src local('☺︎'), url('fonts/SF-Pro-Text-Ultralight.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 300
  src local('☺︎'), url('fonts/SF-Pro-Text-Thin.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 400
  src local('☺︎'), url('fonts/SF-Pro-Text-Light.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 500
  src local('☺︎'), url('fonts/SF-Pro-Text-Regular.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 600
  src local('☺︎'), url('fonts/SF-Pro-Text-Medium.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 700
  src local('☺︎'), url('fonts/SF-Pro-Text-Bold.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 800
  src local('☺︎'), url('fonts/SF-Pro-Text-Heavy.otf') format("otf")

@font-face
  font-family 'SF Pro Text'
  font-style normal
  font-weight 900
  src local('☺︎'), url('fonts/SF-Pro-Text-Black.otf') format("otf")


body
  font-family 'SF Pro Text'
  -webkit-font-smoothing antialiased
  display flex
  flex-flow column
  min-height 100vh

h1
  font-size 50px
  font-weight 200
  line-height 1.0625
  letter-spacing -0.02em

h2
  font-size 42px
  line-height 1.07885
  letter-spacing -0.016em
  font-weight 200

h3
  font-size 36px
  line-height 1.1
  letter-spacing -0.008em
  font-weight 300

h4
  font-size 32px
  line-height 1.1
  letter-spacing -0.008em
  font-weight 300

h5
  font-size 26px
  line-height 1.1
  letter-spacing -0.008em
  font-weight 400

h6
  font-size 22px
  line-height 1.1
  letter-spacing -0.008em
  font-weight 400

a
  color #555

em,
i,
cite,
dfn
  font-style italic

b,
strong
  font-weight 600

.content
  flex 1
  font-size 14px
  line-height 1.7375
  letter-spacing 0.018em
  font-weight 300
  margin 0 auto
  width 60%
  color #555
  img
    display block
    max-width 100%
    margin-left auto
    margin-right auto

.footer
  text-align center
  color #999
  margin 0 auto
  font-size 12px
  letter-spacing 0.03em
  width 100%
  height 5%
  left 0
  padding-top 50px
  padding-bottom 20px
  a
    color #555

.post-title-wrapper
  text-align center
  margin-bottom 2%

.post-title
  color #555
  text-decoration none

.post-date
  margin-top -20px
  padding-bottom 10px
  text-align center

.archive
  margin-top 5%
  margin-left 30%

.archive-item
  div
    margin-top 1%
    margin-bottom 1%
  &__link
    color #555
    &__time
      letter-spacing 0.04em
      display inline-block
      width 15%
    &__title
      display inline
      margin-left 5%

.feed-link
  display inline-block
  vertical-align middle
.feed-image
  height 25px

.header a:not(:first-child):not(:last-child)
  margin-left 20px
  margin-right 18px
.header
  margin-top 20px
  text-align center

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

$fade-in
  opacity 0
  -webkit-animation fadeIn ease-in 1
  -moz-animation fadeIn ease-in 1
  animation fadeIn ease-in 1

  -webkit-animation-fill-mode forwards
  -moz-animation-fill-mode forwards
  animation-fill-mode forwards

  -webkit-animation-duration 1s
  -moz-animation-duration 1s
  animation-duration 1s

.github-image
  @extends $fade-in
  height 35px
  -webkit-animation-delay 0.6s
  -moz-animation-delay 0.6s
  animation-delay 0.6s

.email-image
  @extends $fade-in
  height 35px
  -webkit-animation-delay 0.8s
  -moz-animation-delay 0.8s
  animation-delay 0.8s

.subscribe-image
  @extends $fade-in
  height 35px
  -webkit-animation-delay 1.0s
  -moz-animation-delay 1.0s
  animation-delay 1.0s
